<template>
	<div class="changePhone">
		<HeaderTop :title="titleFonts"></HeaderTop>
        <div class="" v-if='step1'>
            <div class="reminds-fonts">*在此验证原手机号码</div>
            <div class="input-area">
                <div class="input-box">
                    <van-field v-model="oldPhone" type="text" label="原手机号码：" maxlength='11' readonly/>
                </div>
                <div class="input-box input-box2">
                    <van-field v-model="vCode" type="digit" label="短信验证码：" maxlength='6' placeholder='请输入验证码'/>
                    <van-button v-if='!isSending' class="code-btn" round color='#00459E' size="small" @click="getCode()">获取验证码</van-button>
                    <van-button v-if='isSending' class="code-btn" round color='#00459E' size="small">{{count}}s</van-button>
                </div>
            </div>
            <van-button id="btnCover" color="#00459E" @click="checkCode()" block round>提交</van-button>
        </div>
        <div class="" v-if='step2'>
            <div class="reminds-fonts">*在此可绑定新手机号码</div>
            <div class="input-area">
                <div class="input-box">
                    <van-field v-model="newPhone" type="text" label="新手机号码：" maxlength='11' placeholder='请输入新手机号码'/>
                </div>
            </div>
            <van-button id="btnCover" color="#00459E" @click="confirm()" block round>提交</van-button>
        </div>
	</div>
</template>

<script>
import HeaderTop from '../../components/top/top'
import {Toast} from 'vant'
export default {
	name: 'changePhone',
	components: {
		HeaderTop,
	},
	data() {
		return {
            titleFonts:'验证原手机',
            oldPhone:'',
            newPhone:'',
            vCode:'',
            count:'',
            isSending:false,
            step1:true,
            step2:false,
		}
	},
    beforeRouteLeave (to, from, next) {    
        sessionStorage.removeItem('userPhone')
        sessionStorage.removeItem('bindNew')
		this.$destroy(true)
		next()
	},
	mounted() {
        if(sessionStorage.getItem('userPhone')){
            this.oldPhone = sessionStorage.getItem('userPhone')
        }else if(sessionStorage.getItem('bindNew')){
            this.step1 = false
            this.step2 = true
            this.titleFonts = '绑定新手机'
        }
	},
	methods: {
        getCode(){
            let params = {
                validType:'0'
            }
            this.ServerAPI.postAPI(this.API.changeMobileSendSms, params, (success,data)=>{
                this.isLoading = false
				if(success){
					if(data.code === '0000'){
						Toast.success('发送成功')
                        const TIME_COUNT = 60;
                        if (!this.timer) {
                            this.count = TIME_COUNT;
                            this.isSending = true;
                            this.timer = setInterval(() => {
                                if (this.count > 0 && this.count <= TIME_COUNT) {
                                    this.count--;
                                } else {
                                    this.isSending = false;
                                    clearInterval(this.timer);
                                    this.timer = null;
                                }
                            }, 1000)
                        }
					}else{
						Toast.fail(data.info)
					}
				}else{
					Toast.fail(data.info)
				}
			})
        },
		checkCode(){
            let params = {
                // type:'check',
				vcode: this.vCode
			}
			this.ServerAPI.postAPI(this.API.changeMobileCheckSms, params, (success,data)=>{
				if(success){
					if(data.code === '0000'){
						Toast.success('验证通过')
                        this.step1 = false
                        this.step2 = true
                        this.titleFonts = '绑定新手机'
                        // this.$router.push('/bindNewPhone')
					}else{
						Toast.fail(data.info)
					}
				}else{
					Toast.fail(data.info)
				}
			})
        },
        confirm(){
            let params = {
				mobile: this.newPhone
			}
			this.ServerAPI.postAPI(this.API.changeMobile, params, (success,data)=>{
				if(success){
					if(data.code === '1'){
						Toast.success('绑定成功')
                        this.$router.push('/safeCenter')
					}else{
						Toast.fail(data.info)
					}
				}else{
					Toast.fail(data.info)
				}
			})
        },
	}
}
</script>

<style lang="scss" scoped>
.changePhone {
    .reminds-fonts {
		color: rgb(254,121,33);
        margin-top: .2rem;
        padding: 0 .2rem;
	}
    .input-area {
		// width: 94%;
		margin: .3rem auto 0;
		position: relative;
        .input-box {
            border-bottom: #D7D7D7 1px solid;
        }
        .input-box2 {
            margin-top: .15rem;
            position: relative;
            .code-btn {
                position: absolute;
                bottom:0;
                right:0;
                margin: 0 16px 10px 0;
            }
        }
		
	}
}

</style>
